<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>${name_china}管理列表</title>
<%@include file="/common/head.jsp" %>

<!-- 时间日期插件 -->
<link href="<%=request.getContextPath()%>/static/plugin/My97DatePicker/skin/default/datepicker.css" rel="stylesheet" >
<script src="<%=request.getContextPath()%>/static/plugin/My97DatePicker/WdatePicker.js"></script>
<style>
.field-title{
    display: block;
    float: left;
    line-height: 30px;
    margin-top:10px;
}
.fildrange{
    display: flex;
    line-height: 30px;
}
.sameradio{
	  margin-top:10px;
	  margin-left:10px;
}
/****多选模块****/
.selemodule{
    display: inline-flex;
    margin-top: 15px;
    line-height: 30px;
}
.checkall{
	font-size:16px;
}
.checkall>input{
	margin-right: 6px;
}
.samebutton{
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    margin-left: 10px;
    cursor:pointer;
}
.sty1{
  	background:#1f95ef;
}
.sty2{
	background:#1eae31;
}
.sty3{
	background:#0474c8;
}
.sty4{
	background:#f86b67;
}
.sty5{
	background:#37acc1;
}
/****表格数据****/
.chartable{
	width: 100%;
    height: 100%;
    overflow: auto;
}
.sametbale-li{
	width:28%;
	margin-left:10px;
	float:left;
	border:solid 1px #ccc;
	margin-top:10px;
}

.sametableimg{
	width:283px;
	height:157px;
	background:red;
	margin: 0 auto;
	margin-top:10px;
}
.sametableimg>img{
	width:100%;
	height:100%;
}
.sametablename{
	margin-top: 10px;
    padding: 0 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
/***价格**/
.sametbaleprice{
	padding: 0 15px;
    margin-top: 10px;
}
.vocherprice{
    margin-left: 9px;
    color: red;
}
.redpacket{
    float: right;
    color: red;
}
/****活动模块*****/
.activemod{
	padding: 0 15px;
    margin-top: 10px;
    display: inline-flex;
}
.sameactivebut{
    width: 58px;
    height: 18px;
    border: solid 1px #ff0000;
    line-height: 18px;
    text-align: center;
    margin-left: 10px;
    color:#ff0000;
    cursor:pointer;
}
.sameactivebut:nth-child(1){
	margin-left:0px;
}
.pitchbut{
	background:#ff0000;
	color:#fff;
}
/***佣金*****/
.commismod{
	padding: 0 15px;
    margin-top: 10px;
    overflow: auto;
    zoom: 1;
}
.commrate{
	float: left;
}
.commnum{
    float: right;
}
.stock{
	margin-top:2px;
}
/***选项模块***/
.optionmod{
	margin-top:30px;
	display:inline-flex;
	width:100%;
}
.sameoptionsty{
    width: 33%;
    height: 36px;
    background: #0474c8;
    margin-left: 4px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    cursor:pointer;
}
.sameoptionsty:nth-child(1){
	margin-left:0px;
}
.sortname{
	width: 26%;
    color: #555;
    padding-left: 3px;
    margin-left: 5px;
}
.shelf{
	width:49%;
	height:36px;
	background:#0474c8;
	line-height:36px;
	text-align:center;
	color:#fff;
}
.hoverself{
	background:#8191a6;
}
/****选中*****/
.pitchbox{
	position: relative;
    float: right;
    width: 15px;
    height: 15px;
    right: 6px;
    top: 4px;
}
</style>
</head>
<body class="iframe-page">
<div class="page-title-wrapper">
    <div class="page-title">
        <div class="page-title-text">
            <span>${name_china}管理</span>
        </div>
        <div id="toolbar" style="float: right"></div>
    </div>
    <div class="page-title-border"></div>
</div>

<div class="search-field">
    <span class="field-cont">
        <span class="field-cont-title">商品名称</span>
        <input type="text" class="summer-input" id="name"/>
    </span>
    <span class="field-cont">
        <span class="field-cont-title">佣金比率</span>
        <input type="text" class="summer-input" id="name"/>
    </span>
    <span class="field-cont">
        <span class="field-cont-title">至</span>
        <input type="text" class="summer-input" id="name"/>
    </span><br/>
    <div class="fildrange">
    	<span class="field-title">范围</span>
    	<div class="sameradio">
    		<span class="sameitle">全部</span>
    		<input type="radio">
    	</div>
    	<div class="sameradio">
    		<span class="sameitle">天猫</span>
    		<input type="radio">
    	</div>
    	<div class="sameradio">
    		<span class="sameitle">淘宝</span>
    		<input type="radio">
    	</div>
    	<div class="sameradio">
    		<span class="sameitle">京东</span>
    		<input type="radio">
    	</div>
    </div>
     <div class="fildrange">
     	 <span class="field-cont">
	        <span class="field-cont-title">品牌</span>
	        <input type="text" class="summer-input" id="name"/>	
   		 </span>
   		 <span class="field-cont">
	        <span class="field-cont-title">上架时间</span>
	        <input type="text" class="summer-input" id="name"/>	
   		 </span>
   		 <span class="field-cont">
	        <span class="field-cont-title">至</span>
	        <input type="text" class="summer-input" id="name"/>	
   		 </span>
     </div>
     
    <span class="field-btn-wrapper">
        <a id="search" class="btn btn-primary btn-icon wave distance-right"><i class="icon icon-search"></i></a>
        <a id="reset" class="btn btn-icon wave wave-dark"><i class="icon icon-refresh"></i></a>
    </span>
    
    <br/>
    <!-- -爆款选择- -->
    <div class="selemodule">
    	<div class="checkall"><input type="checkbox" >全选</div>
    	<div class="samebutton sty1">爆款</div>
    	<div class="samebutton sty2">推荐</div>
    	<div class="samebutton sty3">精选</div>
    	<div class="samebutton sty4">删除</div>
    	<div class="samebutton sty5">置顶</div>
    </div>
</div>


<!-- -列表- -->
<div id="t-tbale">
	<ul class="chartable">
		<li class="sametbale-li">
			<input type="checkbox" class="pitchbox">
			<div class="sametableimg"><img src="http://file.jhjvip.cn/images/49175d2d-2304-48fd-a919-84522205b0e4.jpg"></div>
			<div class="sametablename">测试测试测试测试测试</div>
			<div class="sametbaleprice">
				<span class="costprice">原价:220元</span>
				<span class="vocherprice">券后价：200元</span>
				<span class="redpacket">20红包券</span>
			</div>
			<div class="activemod">
				<div class="sameactivebut pitchbut">爆款</div>
				<div class="sameactivebut">推荐</div>
				<div class="sameactivebut">精选</div>
			</div>
			<div class="commismod">
				<div class="commrate">佣金比例：100%</div>
				<div class="commnum">佣金：200</div>
			</div>
			<div class="commismod stock">
				<div class="commrate">库存：100</div>
				<div class="commnum">订单数：200</div>
			</div>
			<div class="optionmod">
				<div class="sameoptionsty">下架</div>
				<div class="sameoptionsty">排序<input type="text" class="sortname"></div>
				<div class="sameoptionsty">编辑</div>
			</div>
		</li>
		<li class="sametbale-li">
			<input type="checkbox" class="pitchbox">
			<div class="sametableimg"></div>
			<div class="sametablename">测试测试测试测试测试</div>
			<div class="sametbaleprice">
				<span class="costprice">原价:220元</span>
				<span class="vocherprice">券后价：200元</span>
				<span class="redpacket">20红包券</span>
			</div>
			<div class="activemod">
				<div class="sameactivebut pitchbut">爆款</div>
				<div class="sameactivebut">推荐</div>
				<div class="sameactivebut">精选</div>
			</div>
			<div class="commismod">
				<div class="commrate">佣金比例：100%</div>
				<div class="commnum">佣金：200</div>
			</div>
			<div class="commismod stock">
				<div class="commrate">库存：100</div>
				<div class="commnum">订单数：200</div>
			</div>
			<div class="optionmod">
				<div class="shelf hoverself">下架</div>
				<div class="shelf">排序<input type="text" class="sortname"></div>
			</div>
		</li>
		<li class="sametbale-li">
			<input type="checkbox" class="pitchbox">
			<div class="sametableimg"><img src="http://file.jhjvip.cn/images/49175d2d-2304-48fd-a919-84522205b0e4.jpg"></div>
			<div class="sametablename">测试测试测试测试测试</div>
			<div class="sametbaleprice">
				<span class="costprice">原价:220元</span>
				<span class="vocherprice">券后价：200元</span>
				<span class="redpacket">20红包券</span>
			</div>
			<div class="activemod">
				<div class="sameactivebut pitchbut">爆款</div>
				<div class="sameactivebut">推荐</div>
				<div class="sameactivebut">精选</div>
			</div>
			<div class="commismod">
				<div class="commrate">佣金比例：100%</div>
				<div class="commnum">佣金：200</div>
			</div>
			<div class="commismod stock">
				<div class="commrate">库存：100</div>
				<div class="commnum">订单数：200</div>
			</div>
			<div class="optionmod">
				<div class="sameoptionsty">下架</div>
				<div class="sameoptionsty">排序<input type="text" class="sortname"></div>
				<div class="sameoptionsty">编辑</div>
			</div>
		</li>
		<li class="sametbale-li">
			<input type="checkbox" class="pitchbox">
			<div class="sametableimg"></div>
			<div class="sametablename">测试测试测试测试测试</div>
			<div class="sametbaleprice">
				<span class="costprice">原价:220元</span>
				<span class="vocherprice">券后价：200元</span>
				<span class="redpacket">20红包券</span>
			</div>
			<div class="activemod">
				<div class="sameactivebut pitchbut">爆款</div>
				<div class="sameactivebut">推荐</div>
				<div class="sameactivebut">精选</div>
			</div>
			<div class="commismod">
				<div class="commrate">佣金比例：100%</div>
				<div class="commnum">佣金：200</div>
			</div>
			<div class="commismod stock">
				<div class="commrate">库存：100</div>
				<div class="commnum">订单数：200</div>
			</div>
			<div class="optionmod">
				<div class="shelf hoverself">下架</div>
				<div class="shelf">排序<input type="text" class="sortname"></div>
			</div>
		</li>
		<li class="sametbale-li">
			<input type="checkbox" class="pitchbox">
			<div class="sametableimg"><img src="http://file.jhjvip.cn/images/49175d2d-2304-48fd-a919-84522205b0e4.jpg"></div>
			<div class="sametablename">测试测试测试测试测试</div>
			<div class="sametbaleprice">
				<span class="costprice">原价:220元</span>
				<span class="vocherprice">券后价：200元</span>
				<span class="redpacket">20红包券</span>
			</div>
			<div class="activemod">
				<div class="sameactivebut pitchbut">爆款</div>
				<div class="sameactivebut">推荐</div>
				<div class="sameactivebut">精选</div>
			</div>
			<div class="commismod">
				<div class="commrate">佣金比例：100%</div>
				<div class="commnum">佣金：200</div>
			</div>
			<div class="commismod stock">
				<div class="commrate">库存：100</div>
				<div class="commnum">订单数：200</div>
			</div>
			<div class="optionmod">
				<div class="sameoptionsty">下架</div>
				<div class="sameoptionsty">排序<input type="text" class="sortname"></div>
				<div class="sameoptionsty">编辑</div>
			</div>
		</li>
		<li class="sametbale-li">
			<input type="checkbox" class="pitchbox">
			<div class="sametableimg"></div>
			<div class="sametablename">测试测试测试测试测试</div>
			<div class="sametbaleprice">
				<span class="costprice">原价:220元</span>
				<span class="vocherprice">券后价：200元</span>
				<span class="redpacket">20红包券</span>
			</div>
			<div class="activemod">
				<div class="sameactivebut pitchbut">爆款</div>
				<div class="sameactivebut">推荐</div>
				<div class="sameactivebut">精选</div>
			</div>
			<div class="commismod">
				<div class="commrate">佣金比例：100%</div>
				<div class="commnum">佣金：200</div>
			</div>
			<div class="commismod stock">
				<div class="commrate">库存：100</div>
				<div class="commnum">订单数：200</div>
			</div>
			<div class="optionmod">
				<div class="shelf hoverself">下架</div>
				<div class="shelf">排序<input type="text" class="sortname"></div>
			</div>
		</li>
	</ul>
</div>



<div id="t-wrap">
    <table class="summer-datagrid" id="dataList">
	    <col width="20%">
	    <col width="20%">
	    <col width="20%">
	    <col width="20%">
	    <col width="20%">
	    <thead>
		    <tr>
		        <th>商品名称</th>
		        <th>商品货号</th>
		        <th>商品销量</th>
				<th>商品佣金比</th>
		        <th>操作</th>
		    </tr>
	    </thead>
    </table>
</div>

<script>
	//请求url
	var CONST_URL = {
		LIST: basePath + '${common_url}list?categoryId=${categoryId}',
	   	INIT_ADD: basePath + "${common_url}initAdd?categoryId=${categoryId}",
	   	INIT_EDIT: basePath + "${common_url}initEdit?categoryId=${categoryId}",
	   	INIT_HONGBAO: basePath + "${common_url}initHongbao?categoryId=${categoryId}",
	   	INIT_VIEW: basePath + "${common_url}initView?categoryId=${categoryId}",
	   	DEL: basePath + "${common_url}del"
	};
	
    var  permission = CommonUtil.getPermission('${name_english}');
    
    $(function () {
    	
        // 新建toobar
		$.funcbar({
			id: 'toolbar',
			type: 'toolbar',
			data: permission,
			permit: ['${name_english}:initAdd'],
		});
        
        // 查询按钮
        $('#search').on('click', reloadTable);
        
        //重置按钮
        $('#reset').on('click', function () {
        	//重置文本框的值
        	$('#name').val('');
        	reloadTable();
        });
        
        //新建
        $('#toolbar').on('click', 'a[data-permit="${name_english}:initAdd"]', function() {
        	window.location.href = CONST_URL.INIT_ADD; 	  	
		});
        
        
       createTable();
        
        //查看
        $('#t-wrap').on('click', 'a[data-permit="${name_english}:initView"]', function() {
        	var $this = $(this),
        	    id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
        	window.location.href = CONST_URL.INIT_VIEW +"&id=" + id;
        });
       
        //编辑
        $('#t-wrap').on('click', 'a[data-permit="${name_english}:initEdit"]', function() {
            var $this = $(this),
                id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
            window.location.href = CONST_URL.INIT_EDIT + '&id=' + id;
        });	
        
        //编辑
        $('#t-wrap').on('click', 'a[data-permit="${name_english}:initHongbao"]', function() {
            var $this = $(this),
                id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
            window.location.href = CONST_URL.INIT_HONGBAO + '&id=' + id;
        });	
        
        //删除
		$('#t-wrap').on('click', 'a[data-permit="${name_english}:del"]', function() {
			var $this = $(this),
			    id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
			$.sdialog({
				type: 'confirm',
				msg: '您确定要删除选中的记录吗?',
				onConfirm: function(result) {
				    if (result) {
				    	$.sajax({
			                url : CONST_URL.DEL + "?id=" + id,
			                onLoadSuccess : function() {
			                	 $.stip({
                	                type:'ok',//显示类型 有info、 ok、 danger
                	                text: '删除成功！'    
			                	});
			                	reloadTable();  
			                }
			            });
				    		
				    }	
				}
			});
		});
        
        
    });
    
    // 重新加载表格
	function reloadTable() {
		$('#dataList').datagrid('reload',{
            ajax: {
            	param: {
            		"name": trimSpace($('#name').val())
            	}
            }
        });
	}
    
    //创建表格
    function createTable() {
    	$('#dataList').datagrid({
    		ajax: {
    			url: CONST_URL.LIST,
    			param: {
    				"name": trimSpace($('#name').val())
            	}
    		},
    		columns: [
    		     {
    		    	 field: 'id',
    		    	 hidden: true
    		     },
    		     {
    		    	 field: 'name',
    		    	 render: function (rowData) {
    		    		 return '<a href="javascript:;" data-permit="${name_english}:initView" class="link">'+ rowData.name +'</a>';
    		    	 }
    		     },
    		     {
    		    	 field: 'productNum'
    		     },
    		     {
    		    	 field: 'totalSales'
    		     },
    		     {
    		    	 field: 'marketProfitPercent'
    		     },
    		    {
    		    	 render: function (rowData) {
    		    		 return $.funcbar({
    		    			 data: permission,    //请求的数据
    		    			 type: 'text',     //类型
    		    			 display: 3,    //显示数量
    		    			 permit: ['${name_english}:initEdit', '${name_english}:initHongbao','${name_english}:del'] //需要的权限按钮
    		    		 });
    		    	 }
    		    }
    		          
    	    ]
    	});
    }
    
    //导出方法
    function exp() {
        //得到查询条件中的value和创建表单
        
        var name = trimSpace($('#name').val()),
		    category = $('#category').combobox('getValue');
    	    //startTime = trimSpace($('#startTime').val()),
    	    //stopTime = trimSpace($('#stopTime').val());
        
        var form = document.createElement('form');//创建表单
        form.method = 'post';//表单提交方式
        form.action = CONST_URL.EXP;//路径
        document.body.appendChild(form);

        //创建查询条件(input隐藏)
        //全称
        if ( name ) {
            var inputName = document.createElement('input');
            inputName.type = 'hidden';
            inputName.value = name;
            inputName.name = 'name';
            form.appendChild(inputName );
        }
        
        if ( category ) {
            var inputCategory = document.createElement('input');
            inputCategory.type = 'hidden';
            inputCategory.value = category;
            inputCategory.name = 'category';
            form.appendChild(inputCategory);
        }
        		       
        //如果没有任何条件就提示用户
        if ( name || category  ) {
            form.submit();
        } else {
            $.sdialog({
                 type : 'confirm',
                 msg : '未添加导出条件，默认为全部导出，确定吗？',
                 onConfirm : function(result) {
                     if (result) {
                         form.submit();
                     }
                 }
             });
        }
    }
    
   
   
</script>
</body>
</html>